<template>
  <div class="project-card-container">
    <el-row v-if="projectList.length"
            :gutter="30"
    >
      <el-col v-for="p in projectList"
              :key="p.id"
              :span="4.5"
      >
        <!--    文件夹-->
        <el-card v-if="p.type=='3'" :key="p.id" :body-style="{ padding: '0px', position: 'static'}">
          <div class="body" @click="$emit('enterFolder',p)">
            <el-row align="middle" justify="center" type="flex">
              <el-col :span="24">
                <el-tooltip :content="p.textName" placement="top">
                  <span class="title">
                    {{ p.textName }}
                  </span>
                </el-tooltip>
              </el-col>
            </el-row>
            <img src="~@/assets/images/form/icon1.png" class="folder-img">
            <p class="time">
              创建时间：{{ p.createTime | formatDate }}
            </p>
          </div>
          <div class="btns">
            <el-button type="text" @click="$emit('renameFolder',p)">
              <i class="el-icon-edit" />
              重命名
            </el-button>
            <el-popconfirm
              title="确定删除该文件夹吗？"
              @confirm="deleteForm(p.formKey)"
            >
              <el-button slot="reference"
                         class="text-danger"
                         type="text"
              >
                <i class="el-icon-delete" />
                删除
              </el-button>
            </el-popconfirm>
            <el-button type="text" @click.stop="$emit('downLoadFolder',p)">
              <i class="el-icon-download" />
              导出数据
            </el-button>
          </div>
        </el-card>
        <el-card v-else :key="p.id" :body-style="{ padding: '0px', position: 'static'}" class="move">
          <div class="body">
            <el-row align="middle" justify="center" type="flex">
              <el-col :span="6">
                <span class="form-type" :style="{backgroundColor: getType(p.type).color}">{{ getType(p.type).name }}</span>
              </el-col>
              <el-col :span="4">
                <span
                  :style="getStatusColorStyle(p.status)"
                  class="status-tag"
                />
              </el-col>
              <el-col :span="14">
                <el-tooltip :content="p.textName" placement="top">
                  <span class="title">
                    {{ p.textName }}
                  </span>
                </el-tooltip>
              </el-col>
            </el-row>
            <img
              src=""
            >
            <p class="time">
              创建时间：{{ p.createTime | formatDate }}
            </p>
          </div>
          <div class="btns">
            <el-button type="text" @click="toProjectHandle(p,'editor',currentPage)">
              <i class="el-icon-edit" />
              编辑
            </el-button>
            <el-button type="text" @click="toProjectHandle(p,'data',currentPage)">
              <i class="el-icon-s-data" />
              数据
            </el-button>
            <el-dropdown trigger="click" placement="top">
              <el-button type="text">
                <i class="el-icon-arrow-down el-icon--right" />
                更多
              </el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item
                  v-if="p.status==2"
                  class="text-danger"
                  icon="el-icon-video-pause"
                  @click.native="stopProject(p.formKey)"
                >
                  停止
                </el-dropdown-item>
                <el-dropdown-item
                  v-if="p.status!=2"
                  class="text-danger"
                  icon="el-icon-delete"
                  @click.native="logicDeleteForm(p.formKey)"
                >
                  删除
                </el-dropdown-item>

                <el-dropdown-item icon="el-icon-data-analysis"
                                  @click.native="toProjectHandle(p,'statistics',currentPage)"
                >
                  统计
                </el-dropdown-item>
                <el-dropdown-item v-if="!type" icon="el-icon-scissors" @click.native="(e)=>{$emit('move',p)}">
                  移动到
                </el-dropdown-item>
                <el-dropdown-item v-if="!type" icon="el-icon-download" @click.native="()=>{$emit('downLoad',p)}">
                  导出
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <div v-if="projectList.length==0">
      <el-empty slot="empty" description="暂无数据" />
    </div>
  </div>
</template>

<script>
import mixin from "./mixin"
import draggable from 'vuedraggable'

export default {
  name: "FormCardList",
  components: {
    draggable
  },
  mixins: [mixin],
  props: {
    projectList: {
      type: Array,
      default: () => {
        return []
      }
    },
    // 我的问卷页还是协作页区分 默认为问卷页 协作页某些内容不显示
    type: {
      type: String,
      default: ''
    },
    currentPage:{
      default: ''
    }
  },
  data() {
    return {}
  },
  computed: {
    getStatusColorStyle() {
      return function (code) {
        let color = this.projectStatusList.find((item) => item.code == code).color
        return {
          backgroundColor: color,
          borderColor: color
        }
      }
    }
  },
  methods: {
    endEvent(event) {
      console.log(event)
    }
  }

}
</script>

<style lang="scss" scoped>
.project-card-container {
  //width: 950px;
  margin: 20px auto;

  .el-card {
    border-radius: 4px;
    position: relative;

    .body {
      padding: 10px;
      height: 200px;
      width: 163px;
      text-align: center;
    }
  }

  .el-col {
    margin-bottom: 10px;

    .form-type{
      color: white;
      font-size: 12px;
      padding: 5px 4px;
      border-radius: 5px;
    }

    .status-tag {
      display: inline-block;
      width: 7px;
      height: 7px;
      line-height: 20px;
      background-color: rgba(0, 110, 255, 100);
      text-align: center;
      border: 1px solid rgba(0, 110, 255, 100);
      border-radius: 20px;
      margin-bottom: 2px;
    }

    .title {
      color: rgba(16, 16, 16, 100);
      font-size: 14px;
      text-align: left;
      margin-left: 10px;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      display: block;
      max-width: 100%;
      line-height: 27px;
      vertical-align: bottom;
    }

    .time {
      color: rgba(144, 147, 153, 100);
      font-size: 12px;
      line-height: 20px;
      text-align: center;
      margin: 0;
    }

    img {
      width: 143px;
      height: 121px;
    }

    .folder-img {
      width: 80px;
      height: 69px;
      margin: 0 auto;
      display: inline-block;
    }

    .folder-img + .time {
      margin-top: 20px;
    }

    .btns {
      position: absolute;
      width: 100%;
      margin: 0;
      padding: 0;
      background-color: #f0f0f0;
      bottom: 0;
      display: none;
      border: none;
      text-align: center;
    }

    &:hover .btns {
      display: block;
    }
  }
}

::v-deep .el-card {
  border-radius: 10px !important;
}
</style>
